<!--用户管理，并给用户赋予角色授权-->

<template>
  <div class="app-container">
    <div class="filter-container" style="display: flex; margin: 0 auto; justify-content: space-between;">
      <div>
        <el-input
          v-model.trim="queryParams.code"
          placeholder="学工号"
          clearable
          style="width: 160px;"
          class="filter-item split-item"
        />
        <el-input
          v-model.trim="queryParams.name"
          placeholder="姓名"
          clearable
          style="width: 160px;"
          class="filter-item split-item"
        />

        <el-select v-model="queryParams.typeList" multiple collapse-tags clearable placeholder="用户类型" style="width: 140px;" class="filter-item split-item">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          plain
          @click="handleFilter"
        >查询
        </el-button>

        <el-button
          v-waves
          class="filter-item"
          plain
          icon="el-icon-refresh"
          @click="resetQueryParams"
        >重置
        </el-button>
      </div>
    </div>

    <el-table
      ref="itemTable"
      v-loading="itemListLoading"
      v-el-height-adaptive-table="{bottomOffset: 70}"
      row-key="id"
      :data="itemList"
      border
      fit
      highlight-current-row
      class="item-table"
      height="100px"
      :cell-style="{padding:'5px'}"
      :header-cell-style="{padding:'5px'}"
    >

      <el-table-column
        prop="code"
        header-align="center"
        width="120"
        label="学工号"
        fixed="left"
      />

      <el-table-column
        prop="name"
        header-align="center"
        width="100"
        label="姓名"
        fixed="left"
      />

      <el-table-column
        prop="type.label"
        header-align="center"
        width="80"
        label="人员类型"
      />

      <el-table-column align="center" label="部门/学院" header-align="center" width="200" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          {{ row.orgInfo !== undefined && row.orgInfo !== null ? row.orgInfo.name : '' }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="专业" header-align="center" width="200" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          {{ row.majorInfo !== undefined && row.majorInfo !== null ? row.majorInfo.name : '' }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="班级" header-align="center" width="200" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          {{ row.classInfo !== undefined && row.classInfo !== null ? row.classInfo.name : '' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="120" fixed="right">
        <template slot-scope="{row}">
          <el-link type="primary" :underline="false" style="margin-right: 10px; font-size: 12px;" @click.stop="onGrantRole(row)">角色授权
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="queryParams.total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="loadItemList"
    />

    <!-- menu-grant-drawer -->
    <el-drawer
      ref="grantDrawer"
      :title="title"
      :visible.sync="showMenuGrantDrawer"
      direction="rtl"
      custom-class="edit-drawer"
      size="50%"
      :close-on-press-escape="drawerCloseOnEsc"
      :wrapper-closable="drawerWrapperClosable"
    >
      <div style="margin-left: 10px; margin-right: 10px;">
        <el-table
          ref="roleTable"
          row-key="id"
          :data="roleList"
          border
          fit
          highlight-current-row
          height="400px"
        >

          <el-table-column
            type="selection"
            width="55"
          />

          <el-table-column
            prop="name"
            header-align="center"
            label="角色名称"
          />

        </el-table>
      </div>

      <div class="edit-drawer-footer">
        <el-button
          v-waves
          class="filter-item"
          plain
          size="mini"
          @click="showMenuGrantDrawer = false"
        >取消
        </el-button>

        <el-button
          v-waves
          class="filter-item"
          size="mini"
          type="primary"
          @click="onSaveUserRole"
        >保存
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import permission from '@/directive/permission/index.js'
import waves from '@/directive/waves'
import elHeightAdaptiveTable from '@/directive/el-table'
import Settings from '@/settings'
import { resetObject } from '@utils/index'
import Pagination from '@components/Pagination'
import CommonApi from '@api/sys/common'
import RoleApi from '@api/iam/role'
import UserApi from '@api/iam/userInfo'

let self

export default {
  name: 'IamUserList',
  components: { Pagination },
  directives: { permission, waves, elHeightAdaptiveTable },
  mixins: [],
  props: {},
  data() {
    return {
      itemListLoading: false,
      itemList: [],
      drawerCloseOnEsc: Settings.drawerCloseOnEsc,
      drawerWrapperClosable: Settings.drawerWrapperClosable,
      showMenuGrantDrawer: false,
      title: undefined,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        code: undefined,
        name: undefined,
        typeList: []
      },
      typeList: [],
      roleList: [],
      selectUser: undefined
    }
  },
  created() {
    self = this
    self.loadDependParams()
    this.loadItemList()
  },
  mounted() {

  },
  methods: {
    loadDependParams() {
      CommonApi.fetchEnumList({ type: 'com.codol.zhty.modules.iam.enums.UserType' }).then(response => {
        const { list } = response.data
        this.typeList.splice(0, this.typeList.length, ...list)
      })

      RoleApi.fetchList({ pageNum: 1, pageSize: 9999999 }).then(response => {
        const { list } = response.data
        this.roleList.splice(0, this.roleList.length, ...list)
      })
    },
    resetQueryParams() {
      resetObject(this.queryParams, undefined, ['pageNum', 'pageSize', 'total'])
      this.handleFilter()
    },
    handleFilter() {
      this.queryParams.pageNum = 1
      this.loadItemList()
    },
    loadItemList() {
      if (this.$refs.itemTable) {
        this.$refs.itemTable.clearSelection()
      }
      this.itemListLoading = true
      UserApi.fetchList(this.queryParams).then(response => {
        const { page } = response.data
        this.itemList.splice(0, this.itemList.length, ...page.records)
        this.queryParams.total = page.total
      }).finally(() => {
        this.itemListLoading = false
      })
    },
    onGrantRole(item) {
      this.selectUser = item
      this.title = `【${item.name}】角色授权`
      this.showMenuGrantDrawer = true
      UserApi.getInfo(this.selectUser.id).then(response => {
        const { list } = response.data
        this.$nextTick(() => {
          this.$refs.roleTable.clearSelection()
          list.map(row => {
            const index = this.roleList.findIndex((item, index) => {
              if (item.id === row.id) {
                return index
              }

              return -1
            })

            if (index >= 0) {
              this.$refs.roleTable.toggleRowSelection(this.roleList[index], true)
            }
          })
        })
      })
    },
    onSaveUserRole() {
      const items = this.$refs.roleTable.selection
      const ids = items.map((item) => item.id)
      UserApi.grantRoles(this.selectUser.id, { values: ids }).then(() => {
        this.$message({ message: '操作成功', type: 'success' })
        this.selectUser = undefined
        this.showMenuGrantDrawer = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
